<template>
  <!------------------------- 采购下单规格弹窗 ------------------------->
  <!---------    说明
      此组件为规格展示与交互组件，用于采购下单商品多规格显示，商品详情页面规格显示
      props：
        data      ———— 商品信息
        pageType  ———— 页面类型(quickPlaceOrder,detail)
      method：
        closePopup  ———— 关闭弹窗
        addCart     ———— 加购物车
        buyNow      ———— 直接购买
   -->
  <div class="popup-content">
    <svg-icon icon-class="delete-2" class="color-gray fs-26 popup-close" @goPage="closePopup" />
    <div class="pb-170 pos-r" style="z-index:1;">
      <div class="flex pb-30 hb">
        <img-box class="is-200 br-10 flex-s-0" :img-url="prochaseProduct.ProductImg" />
        <div class="prductItem-detail ml-20 flex-1">
          <p v-if="prochaseProduct.MinPrice < prochaseProduct.MaxPrice" class="color-primary fs-40">
            <span><span class="fs-26">￥</span>{{ prochaseProduct.MinPrice }}<span class="fs-26">/{{ changeData.BaseUnit }}</span></span>
            <span>
              <span class="fs-26"> ~ ￥</span>{{ prochaseProduct.MaxPrice }}<span class="fs-26">/{{ changeData.BaseUnit }}</span></span>
          </p>
          <p v-if="prochaseProduct.MinPrice === prochaseProduct.MaxPrice" class="color-primary fs-40">
            <span><span class="fs-26">￥</span>{{ prochaseProduct.MinPrice }}<span class="fs-26">/{{ changeData.BaseUnit }}</span></span>
          </p>
          <p class="color-gray fs-26">库存： {{ prochaseProduct.Stock }}{{ changeData.BaseUnit }}</p>
          <p v-show="prochaseProduct.MinNum && prochaseProduct.MinNum > 0" class="color-gray fs-26">起批： {{ prochaseProduct.MinNum }}</p>
          <p v-show="prochaseProduct.AddNum && prochaseProduct.AddNum > 0" class="color-gray fs-26">增量： {{ prochaseProduct.AddNum }}</p>
        </div>
      </div>
      <div v-if="changeData.DefaultUnit" class="skuItem hb">
        <p class="color-gray-light fs-24 mt-20">
          <span>单位</span>
          <span
            v-show="activeUnitName !== changeData.BaseUnit && changeData.BaseUnit"
          >(1{{ activeUnitName }}={{ activeUnitRatio }}{{ changeData.BaseUnit }})</span>
          <span>：</span>
        </p>
        <div v-if="changeData.UnitList && changeData.UnitList.length > 0" class="mt-20 flex-v-c flex-wrap">
          <div
            v-for="(item, index) in changeData.UnitList"
            :key="index"
            class="skuBtn"
            :class="activeUnitIndex === index ? 'color-primary' : ''"
            @click="changeUnit(index)"
          >
            {{ item }}
          </div>
        </div>
        <div v-else class="mt-20 flex-v-c flex-wrap">
          <div class="skuBtn color-primary">{{ changeData.DefaultUnit }}</div>
        </div>
      </div>
      <div class="skuItem">
        <!-- 单规格 -->
        <div v-if="specType === 0">
          <div v-for="(item, index) in ProductSkuAttrList[0].SkuList" :key="index" class="flex-s-c mt-24 fs-28 ">
            <div class="flex-2 tal">
              <span>购买数量</span>
            </div>
            <div class="flex-1 tar flex-fe-c">
              <span
                class="btn-minus flex-s-0 "
                :class="item.Amount <= 0 ? 'color-shadow' : ''"
                @click="
                  changeAmount(item, item.Amount, item.Stock, -1, changeData.MinNum, activeUnitRatio, item.LimitBuy, changeData.AddNum)
                "
              >-</span>
              <div class="btn-input-box">
                <input
                  v-model="item.Amount"
                  type="number"
                  class="btn-input"
                  @blur="
                    changeAmount(item, item.Amount, item.Stock, 0, changeData.MinNum, activeUnitRatio, item.LimitBuy, changeData.AddNum)
                  "
                >
              </div>
              <span
                class="btn-plus flex-s-0"
                :class="item.Amount >= item.Stock || (item.Amount >= item.LimitBuy && item.LimitBuy > 0) ? 'color-shadow' : ''"
                @click="
                  changeAmount(item, item.Amount, item.Stock, 1, changeData.MinNum, activeUnitRatio, item.LimitBuy, changeData.AddNum)
                "
              >+</span>
            </div>
          </div>
        </div>
        <!-- 多规格（只有一类规格） -->
        <div v-if="specType === 1" class="skuItem">
          <div class="flex-s-c mt-24 color-gray-light fs-24 ">
            <div class="flex-2 tal">{{ ProductSkuAttrList[0].AttributeName || '规格' }}</div>
            <div class="flex-2 tac">价格</div>
            <div class="flex-2 tac">库存</div>
            <div class="flex-3 tar">购买数量</div>
          </div>
          <div v-for="(item, index) in ProductSkuAttrList" :key="index" class="flex-s-c mt-24 fs-28 ">
            <div class="flex-2 tal">{{ item.ValueStr }}</div>
            <div class="flex-2 tac">{{ item.SkuList[0].SalePrice }}</div>
            <div class="flex-2 tac">{{ item.SkuList[0].Stock }}</div>
            <div class="flex-3 tar flex-fe-c">
              <span
                class="btn-minus flex-s-0 "
                :class="item.SkuList[0].Amount <= 0 ? 'color-shadow' : ''"
                @click="
                  changeAmount(
                    item.SkuList[0],
                    item.SkuList[0].Amount,
                    item.SkuList[0].Stock,
                    -1,
                    changeData.MinNum,
                    activeUnitRatio,
                    item.SkuList[0].LimitBuy,
                    changeData.AddNum
                  )
                "
              >-</span>
              <div class="btn-input-box">
                <input
                  v-model="item.SkuList[0].Amount"
                  type="number"
                  class="btn-input"
                  @blur="
                    changeAmount(
                      item.SkuList[0],
                      item.SkuList[0].Amount,
                      item.SkuList[0].Stock,
                      0,
                      changeData.MinNum,
                      activeUnitRatio,
                      item.SkuList[0].LimitBuy,
                      changeData.AddNum
                    )
                  "
                >
              </div>
              <span
                class="btn-plus flex-s-0"
                :class="
                  item.SkuList[0].Amount >= item.SkuList[0].Stock ||
                    (item.SkuList[0].Amount >= item.SkuList[0].LimitBuy && item.SkuList[0].LimitBuy > 0)
                    ? 'color-shadow'
                    : ''
                "
                @click="
                  changeAmount(
                    item.SkuList[0],
                    item.SkuList[0].Amount,
                    item.SkuList[0].Stock,
                    1,
                    changeData.MinNum,
                    activeUnitRatio,
                    item.SkuList[0].LimitBuy,
                    changeData.AddNum
                  )
                "
              >+</span>
            </div>
          </div>
        </div>

        <!-- 多规格（第一规格） -->
        <div v-if="specType === 2" class="skuItem hb">
          <p class="color-gray-light fs-24 mt-20">{{ ProductSkuAttrList[0].AttributeName || '规格' }}：</p>
          <div class="mt-20 flex-v-c flex-wrap">
            <div
              v-for="(item, index) in ProductSkuAttrList"
              :key="index"
              class="skuBtn"
              :class="activeSpecIndex === index ? 'color-primary' : ''"
              @click="changeSpec(index)"
            >
              {{ item.ValueStr }}
            </div>
          </div>
        </div>
        <!-- 第二规格 -->
        <div v-if="secondSpecList && secondSpecList.length > 0" class="skuItem">
          <div class="flex-s-c mt-24 color-gray-light fs-24 ">
            <div class="flex-2 tal">{{ secondSpecList[0].AttributeName || '规格' }}</div>
            <div class="flex-2 tac">价格</div>
            <div class="flex-2 tac">库存</div>
            <div class="flex-3 tar">购买数量</div>
          </div>
          <div v-for="(item, index) in secondSpecList" :key="index" class="flex-s-c mt-24 fs-28 ">
            <div class="flex-2 tal">
              {{ item.AttributeSkuDisplay || item.AttributeNameValue.substr(0, item.AttributeNameValue.length - 1) }}
            </div>
            <div class="flex-2 tac">{{ item.SalePrice }}</div>
            <div class="flex-2 tac">{{ item.Stock }}</div>
            <div class="flex-3 tar flex-fe-c">
              <span
                class="btn-minus flex-s-0 "
                :class="item.Amount <= 0 ? 'color-shadow' : ''"
                @click="
                  changeAmount(item, item.Amount, item.Stock, -1, changeData.MinNum, activeUnitRatio, item.LimitBuy, changeData.AddNum)
                "
              >-</span>
              <div class="btn-input-box">
                <input
                  v-model="item.Amount"
                  type="number"
                  class="btn-input"
                  @blur="
                    changeAmount(item, item.Amount, item.Stock, 0, changeData.MinNum, activeUnitRatio, item.LimitBuy, changeData.AddNum)
                  "
                >
              </div>
              <span
                class="btn-plus flex-s-0"
                :class="item.Amount >= item.Stock || (item.Amount >= item.LimitBuy && item.LimitBuy > 0) ? 'color-shadow' : ''"
                @click="
                  changeAmount(item, item.Amount, item.Stock, 1, changeData.MinNum, activeUnitRatio, item.LimitBuy, changeData.AddNum)
                "
              >+</span>
            </div>
          </div>
        </div>
      </div>
      <div class="fixed-bottom  bottom-box">
        <button class="btn-large color-white bg-primary" @click="addCart">加入购物车</button>
      </div>
    </div>
  </div>
</template>

<script>
import imgBox from 'components/imgBox'
export default {
  name: 'PurchaseOrderSpec',
  components: {
    imgBox
  },
  props: {
    data: {
      // 数据
      type: Object,
      required: true
    },
    fresh: {
      type: Boolean,
      required: false,
      default: false
    },
    pageType: {
      // 按钮类型
      type: String,
      required: false,
      default: 'quickPlaceOrder'
    }
  },
  data() {
    return {
      changeData: {},
      activeUnitIndex: -1,
      activeUnitName: '',
      activeUnitRatio: 1,
      activeSpecIndex: -1,
      secondSpecList: [],
      cartRequestObj: [],
      ProductSkuAttrList: [],
      prochaseProduct: {},
      LimitBuy: '',
      specType: -1 // 0:单规格，1：单一类型多规格(第一类型为多个)，2:多类型多规格
    }
  },
  watch: {
    data(newVal, oldVal) {
      console.log('商品变化')
      this.init()
    },
    fresh(newVal, oldVal) {
      console.log('gengxin')
      this.init()
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.activeUnitIndex = -1
      this.activeUnitName = ''
      this.activeUnitRatio = 1
      this.activeSpecIndex = -1
      this.secondSpecList = []
      this.cartRequestList = []
      this.changeData = this.data
      this.ProductSkuAttrList = this.changeData.ProductSkuAttrList || []
      this.prochaseProduct = this.changeData.prochaseProduct || {}

      this.LimitBuy = this.prochaseProduct.LimitBuy || 0
      this.changeData.BaseUnit = this.changeData.BaseUnit || this.changeData.DefaultUnit
      if (this.changeData.UnitList && this.changeData.UnitList.length > 0) {
        this.changeData.UnitList.forEach((item, index) => {
          if (this.changeData.DefaultUnit === item) {
            this.activeUnitIndex = index
            this.activeUnitName = this.changeData.UnitList[index]
            this.activeUnitRatio = this.changeData.UnitratioList[index]
          }
        })
      } else {
        this.activeUnitName = this.changeData.BaseUnit
      }
      // 判断规格类型
      if (this.ProductSkuAttrList.length === 1) {
        if (this.ProductSkuAttrList[0].SkuList && this.ProductSkuAttrList[0].SkuList.length === 1) {
          this.specType = 0
          return
        }
        if (this.ProductSkuAttrList[0].SkuList && this.ProductSkuAttrList[0].SkuList.length > 1) {
          this.specType = 2
          return
        }
      }
      if (this.ProductSkuAttrList.length > 1) {
        let _hasSecondSpec = false
        this.ProductSkuAttrList.forEach(item => {
          if (item.SkuList && item.SkuList.length > 0) {
            item.SkuList.forEach(ite => {
              console.log(ite.AttributeName)
              console.log(typeof ite.AttributeName)
              if (ite.AttributeName !== null) {
                _hasSecondSpec = true
              }
            })
          }
        })
        this.specType = _hasSecondSpec ? 2 : 1
      }
    },
    // 关闭弹窗
    closePopup() {
      this.$emit('closePopup')
    },

    // 加入购物车
    addCart() {
      this.$emit('addCart', this.cartRequestList)
    },

    changeUnit(index) {
      this.activeUnitIndex = index
      this.activeUnitName = this.changeData.UnitList[index]
      this.activeUnitRatio = this.changeData.UnitratioList[index]
    },
    changeSpec(index) {
      this.activeSpecIndex = index
      this.secondSpecList = this.changeData.ProductSkuAttrList[index].SkuList
      if (this.secondSpecList && this.secondSpecList.length > 0) {
        this.secondSpecList.forEach(item => {
          item.AttributeNameSingle = item.AttributeNameSingle || item.AttributeNameValue
        })
      }
    },
    changeAmount(item, num, stock, type, minNum, UnitRatio, LimitBuy, AddNum) {
      this.$utils.changeAmount(item, num, stock, type, minNum, UnitRatio, LimitBuy, AddNum)
      const _obj = {}
      _obj.ProductId = item.ProductId
      _obj.Amount = item.Amount
      _obj.SkuId = item.ID
      let _newObj = true
      this.LimitBuy = item.LimitBuy
      if (this.cartRequestList && this.cartRequestList.length > 0) {
        for (let i = 0; i < this.cartRequestList.length; i++) {
          if (_obj.SkuId === this.cartRequestList[i].SkuId && _obj.ProductId === this.cartRequestList[i].ProductId) {
            this.cartRequestList[i].Amount = _obj.Amount
            _newObj = false
            break
          }
        }
      }
      if (_newObj) {
        this.cartRequestList.push(_obj)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// 弹窗组件
.popup-content {
  padding: 30px;
  position: relative;
  background: $colorF;
  border-radius: 40px 40px 0 0;
  .popup-close {
    position: absolute;
    right: 30px;
    top: 30px;
    z-index: 5;
  }
  .prductItem-detail {
    position: relative;
    .prductItem-p-left {
      position: absolute;
      bottom: 0;
      left: 0;
    }
    .prductItem-p-right {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
  .skuItem {
    padding-bottom: 4px;
    .skuBtn {
      position: relative;
      font-size: 28px;
      line-height: 64px;
      padding: 0 30px;
      min-width: 136px;
      border-radius: 8px;
      overflow: hidden;
      margin: 0 20px 20px 0;
      text-align: center;
      &:before {
        content: '';
        position: absolute;
        height: 100%;
        width: 100%;
        background: currentColor;
        opacity: 0.1;
        top: 0;
        left: 0;
      }
    }
    .btn-input-box {
      position: relative;
      margin: 0 4px;
      &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: currentColor;
        opacity: 0.1;
      }
      .btn-input {
        position: relative;
        z-index: 1;
        height: 56px;
        width: 80px;
        line-height: 1;
        border: none;
        // background: transparent;
        text-align: center;
      }
    }
    .btn-minus,
    .btn-plus {
      position: relative;
      font-size: 45px;
      line-height: 56px;
      height: 56px;
      width: 56px;
      text-align: center;
      overflow: hidden;
      border-radius: 0 8px 8px 0;
      &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: currentColor;
        opacity: 0.1;
      }
    }
    .btn-minus {
      border-radius: 8px 0 0 8px;
    }
  }
}
.bottom-box {
  padding: 0 30px 50px 30px;
  display: flex;
  align-items: center;
  .br-left {
    border-radius: 44px 0 0 44px;
  }
  .br-right {
    border-radius: 0 44px 44px 0;
  }
}
</style>
